<template>
    <div>
        <!-- 菜单层 -->
        <div id="perTreeMenu" class="tree_menu" :style="{...value.position}">
            <ul>
                <li @click="intOpen" v-if="value.options.indexOf('open') > -1"><i class="el-icon-tickets"></i> 打开</li>
                <li @click="intEdit" v-if="value.options.indexOf('edit') > -1" v-dialog="editData" :data-type="value.directives.edit"><i class="el-icon-edit"></i> 编辑</li>
                <li @click="intDelete" v-if="value.options.indexOf('del') > -1"><i class="el-icon-delete"></i> 删除</li>
            </ul>
        </div>
    </div>
</template>
<script type="text/javascript">
import patrol from '../../patrol'
import { forward, reverse, deepCopy } from '../../utils'
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')
import Vue from 'Vue'
export default {
    props: {
        value: [Array, Object]
    },
    components: {
        //empty
    },
    data() {
        return {
            isDisplay: false,
            editData: null,
        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {},
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {
        editData: {
            handler(val, old) {
                this.value.data.forEach(item => {
                    // 模型
                    if (this.value.type == 'model' && item.type == this.value.type) {
                        item.children.forEach((cont, index) => {
                            if (cont.name == this.value.value.name) {
                                for (var key in val) {
                                    cont[key] = val[key];
                                }
                            }
                        })
                    }
                    // 页面
                    if (this.value.type == 'page' && item.type == this.value.type) {
                        item.children.forEach(cont => {
                            if (cont.name == this.value.value.path) {
                                cont.children.forEach(i => {
                                    console.log('name', [i.name, val])
                                    if (i.name == val.config.data.name) {
                                        for (let key in val.config.data) {
                                            i[key] = val.config.data[key];
                                        }
                                    }
                                })
                            }
                        })
                    }
                    // 组件
                    if (this.value.type == 'component' && item.type == this.value.type) {
                        item.children.forEach(cont => {
                            if (cont.name == this.value.value.name) {
                                for (let key in val.config.data) {
                                    cont[key] = val.config.data[key];
                                }
                            }
                        })
                    }
                })
            },
            deep: true,
        },
    },
    created() {
        // 获取当前选中数据
        this.getData();
    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    mounted() {
        let html = window.document.getElementsByTagName('body')[0];
        let _this = this;
        html.addEventListener('click', function() {
            _this.isDisplay ? _this.isDisplay = false : _this.isDisplay;
        })
        html.addEventListener('contextmenu', function() {
            _this.isDisplay ? _this.isDisplay = false : _this.isDisplay;
        })

        // // 全局挂载点击事件  隐藏资源右键菜单栏
        // Vue.prototype.globalClick = function(callback) {
        //   document.getElementsByTagName('body')[0].onclick = function() {
        //     callback();
        //   };
        //   document.getElementsByTagName('body')[0].oncontextmenu = function() {
        //     callback();
        //   };
        // };
        // this.globalClick(this.moreSetupMenuRemove)
    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        ...mapActions(['setPage', 'retMain']),
        // moreSetupMenuRemove() {
        //   this.isDisplay = false;
        // },
        /**
         * 打开
         * @return {[type]} [description]
         */
        intOpen() {

            let data = reverse(this.editData, patrol);

            console.log("打开的数据", data.main)
            this.setPage(data.config);

            let main = {
                libraries: data.main.libraries
            }
            this.retMain(data.main);
            this.isDisplay = false;
        },

        /**
         * 编辑
         * @return {[type]} [description]
         */
        intEdit() {
            this.isDisplay = false;
        },

        hiddenMenu() {
            this.isDisplay = false;
        },

        // 删除渲染数据
        _onDelete(data, param) {
            data.forEach((item, index) => {
                if (item.name == param.name) {
                    data.splice(index, 1);
                }
                if (item.children && item.children.length > 0) {
                    this._onDelete(item.children, param)
                }
            })
        },

        /**
         * 删除
         * @return {[type]} [description]
         */
        intDelete() {
            let data = this.value.data;
            let param = this.value.value;
            let children = null;
            data.forEach(item => {
                if (item.type == this.value.type) {
                    children = item.children
                }
            })

            this.$confirm('此操作将永久删除该资源，不可恢复， 是否继续?', '提示', {
                confirmButtonText: '继续',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                switch (this.value.type) {
                    case 'page':
                        // 页面资源
                        this.$cloud.post('build/page_del', { path: param.path, name: param.name }).then(response => {
                            this._onDelete(children, param);
                        })
                        break;
                    case 'component':
                        // 组件资源
                        this.$cloud.post('build/component_del', { name: param.name }).then(response => {
                            this._onDelete(children, param);
                        })
                        break;
                    case 'model':
                        // 模型资源
                        this.$cloud.post('build/delete', { name: param.name }).then(response => {
                            this._onDelete(children, param);
                        })
                        break;
                }
            }).catch(() => {
                this.$message.info('已取消');
            });
            this.isDisplay = false;
        },

        /**
         * 获取当前打开数据
         * @return {[type]} [description]
         */
        getData() {
            let data = this.value.value;
            let url = null;
            let param = {};
            switch (this.value.type) {
                case 'page':
                    url = 'build/page_one';
                    param = {
                        path: data.path,
                        name: data.name
                    }
                    break;
                case 'component':
                    url = 'build/component_one';
                    param = {
                        name: data.name
                    }
                    break;
                case 'model':
                    url = 'build/first'
                    param = {
                        name: data.name
                    }
                    break;
            }
            this.$cloud.post(url, param).then(response => {
                this.editData = response;
            })
        },
    }
}
</script>
<style type="text/css" lang="scss">
.disabled {
    background-color: rgba(99, 99, 99, 0.1) !important;
    color: rgba(99, 99, 99, 0.5) !important;
    cursor: default !important;
}

.tree_menu {
    position: fixed;
    display: block;
    z-index: 20000;
    background-color: #fff;
    padding: 5px 0;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    left: 100px;
    top: 200px;

    ul {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
        margin: 0;
        padding: 0 15px;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;
    }

    ul li:hover {
        background-color: #ebeef5
    }
}

.menu_mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 19999;
}
</style>